<template>
  <div id="app">
    <!-- 搜索框和按钮 -->
    <div class="header">
      <!-- <input type="text"  v-model="formDataOn.areaId" placeholder="区域名" class="search-box" />
      <input type="text"  v-model="formDataOn.equipmentId" placeholder="设备名" class="search-box" /> -->
      任务名:<input type="text"  v-model="formDataOn.taskId" placeholder="请输入任务名" class="search-box" />
      <button class="btn" @click="getPlan">搜索</button>
      <button class="btn primary" @click="addTaskCycle">添加任务周期</button>
    </div>

    <!-- 表格 -->
    <el-table :data="filteredData" class="custom-table" 
    :row-style="setRowHeight"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}" border  @selection-change="handlefilteredChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column  type="index" label="序列"/>
    <el-table-column prop="taskId" label="任务ID"></el-table-column>
    <el-table-column prop="areaName" label="区域名"></el-table-column>
    <el-table-column prop="equipmentType" label="设备名称"></el-table-column>
    <el-table-column prop="checkItem" label="检查项"></el-table-column>
    <el-table-column prop="setValue" label="设定值"  width="300"></el-table-column>
     <el-table-column prop="period" label="周期"  width="300"></el-table-column>
      <!-- 任务周期 -->
      <el-table-column label="任务周期">
        <template slot-scope="scope">
          <span v-if="scope.row.scheduleId"> 已添加 </span>
          <el-button v-else type="text" @click="addTaskCycle(scope.row)">添加周期</el-button>
        </template>
      </el-table-column>
    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button type="text" @click="edit(scope.row)">编辑</el-button>
        <el-button type="text" @click="view(scope.row)">详细</el-button>
        <el-button type="text" class="danger" @click="deleteItem(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="totalOn > 0"
      :total="totalOn"
      :page.sync="formDataOn.pageNum"
      :limit.sync="formDataOn.pageSize"
      @pagination="getPlan"
    />


    <el-dialog :visible.sync="isModalVisibleTwo" title="新增点检计划">
      <el-form :model="addData" label-width="100px">
        <!-- <el-form-item label="计划名称">
          <el-input v-model="addData.planName" placeholder="请输入计划名称" style="width: 50%;"></el-input>
        </el-form-item> -->
        <el-form-item label="点检项目">
          <el-select v-model="addData.scheduleId" placeholder="请选择点检项目" @change="changeSchedulesId(addData.scheduleId)">
            <el-option
              v-for="item in schedules"
              :key="item.id"
              :label="item.period"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
<!--                <el-button @click="closeTwoModal">上一步</el-button>-->
                <el-button type="primary" @click="submit">完成</el-button>
            </span>
    </el-dialog>

    <!-- 弹窗 -->
    <!-- 弹窗 -->
  <div v-if="isModalOpen" class="modal-overlay custom-modal">
    <div class="modal">
      <div class="modal-header">
        <h3>新增点位计划</h3>
        <button class="close-btn" @click="closeModal">×</button>
      </div>

<!--      &lt;!&ndash; 弹窗内容 &ndash;&gt;-->
<!--      <el-dialog :visible.sync="isModalOpen" title="新增点位计划" width="80%">-->
<!--            <div>-->
<!--                <h4>1）填写基本信息</h4>-->
<!--                 <div class="form-row">-->
<!--                    点检计划名称-->
<!--                    <el-input placeholder="点检计划名称" v-model="addData.planName"></el-input>-->
<!--                    点检区域-->
<!--                    <el-select v-model="addData.area" placeholder="请选择点检区域"  clearable @change ="handleArea(addData.area)">-->
<!--                        <el-option-->
<!--                            v-for="area in areas"-->
<!--                            :key="area.areaId"-->
<!--                            :label="area.areaName"-->
<!--                            :value="area.areaId">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--&lt;!&ndash;                    有效期&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-date-picker&ndash;&gt;-->
<!--&lt;!&ndash;                        v-model="addData.startDate"&ndash;&gt;-->
<!--&lt;!&ndash;                        type="daterange"&ndash;&gt;-->
<!--&lt;!&ndash;                        start-placeholder="开始日期"&ndash;&gt;-->
<!--&lt;!&ndash;                        end-placeholder="结束日期">&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-date-picker>&ndash;&gt;-->
<!--                </div>-->

<!--                <div class="tables">-->
<!--                    &lt;!&ndash; 左表 &ndash;&gt;-->
<!--                    <div class="table-section">-->
<!--                        <div class="table-header">-->
<!--                            <el-input-->
<!--                                placeholder="输入设备名称"-->
<!--                                v-model="formData.equipmentName"-->
<!--                                class="mini-input"--> 
<!--                            ></el-input>-->
<!--                            <el-select v-model="formData.equipmentType" class="mini-select">-->
<!--                                <el-option label="设备类别" value="" disabled></el-option>-->
<!--                                <el-option label="维修" value="检修"></el-option>-->
<!--                                <el-option label="巡查" value="巡查"></el-option>-->
<!--                            </el-select>-->
<!--                            <el-button @click="getEquipments" class="search-btn">搜索</el-button>-->
<!--                        </div>-->
<!--                        <el-table-->
<!--                            :data="equipments"-->
<!--                            border-->
<!--                            @selection-change="handleSelectionChange"-->
<!--                            class="custom-table"-->
<!--                        >-->
<!--                             <el-table-column type="selection" width="55"></el-table-column>-->
<!--                            <el-table-column prop="equipmentId" label="设备编号" width="120"></el-table-column>-->
<!--                            <el-table-column prop="equipmentName" label="设备名称" width="120"></el-table-column>-->
<!--&lt;!&ndash;                            <el-table-column prop="status" label="设备地点" width="120"></el-table-column>&ndash;&gt;-->
<!--                            <el-table-column prop="equipmentType" label="设备类别" width="120"></el-table-column>-->
<!--                        </el-table>-->
<!--                        <pagination-->
<!--                            v-show="total > 0"-->
<!--                            :total="total"-->
<!--                            :page.sync="formData.pageNum"-->
<!--                            :limit.sync="formData.pageSize"-->
<!--                            @pagination="getEquipments"-->
<!--                        />-->
<!--                    </div>-->

<!--                    &lt;!&ndash; 右表 &ndash;&gt;-->
<!--                    <div class="table-section">-->
<!--                        <div class="table-header">-->
<!--                            <el-input-->
<!--                                placeholder="输入姓名/名称"-->
<!--                                class="mini-input"-->
<!--                            ></el-input>-->

<!--                            <el-select class="mini-select" v-model="formData.dept">-->

<!--                              <el-option-->
<!--                                  v-for="dept in depts"-->
<!--                                  :key="dept.deptId"-->
<!--                                  :label="dept.deptName"-->
<!--                                  :value="dept.deptName">-->
<!--                              </el-option>-->
<!--                            </el-select>-->
<!--                        </div>-->
<!--                        <el-table class="custom-table" :data="users" @selection-change="usersSelectionChange">-->
<!--                            <el-table-column type="selection" width="55"></el-table-column>-->
<!--                            <el-table-column prop="nickName" label="姓名"></el-table-column>-->
<!--                            <el-table-column prop="dept.deptName" label="部门"></el-table-column>-->
<!--                            <el-table-column label="组织"></el-table-column>-->
<!--                            <el-table-column prop="phonenumber" label="手机号"></el-table-column>-->
<!--                        </el-table>-->
<!--                        <pagination-->
<!--                            v-show="twoTotal > 0"-->
<!--                            :total="twoTotal"-->
<!--                            :page.sync="formData.twoPageNum"-->
<!--                            :limit.sync="formData.twoPageSize"-->
<!--                            @pagination="getUsers"-->
<!--                        />-->
<!--                    </div>-->
<!--                </div>-->

<!--                <el-button @click="isModalVisibleTwo=true" type="primary">下一步</el-button>-->
<!--            </div>-->
<!--        </el-dialog>-->



    </div>
  </div>
  </div>
</template>

<script>
import '../../../css/custom-modal.css';
import {userList,deviceList,getDepts,getUsers,getSchedules,addCheckingPlan,getPlan,getRegionList} from "@/api/wushui/inspection";
import {getEquipmentListByAreaId} from "@/api/wushui/equipment";
import { watch } from 'vue';
export default {
  data() {
    return {
      formDataOn : {
        pageNum: 1,
        pageSize: 10,
        areaId:'',
        equipmentId:'',
        taskId:''
      },
      isModalVisibleTwo: false,
      checkItems: [], // 用于存储从数据库获取的点检项目
      formData: {
          deviceName: '',
          deviceType: '',
          pageNum: 1,
          pageSize: 10,
          twoPageNum: 1,
          twoPageSize: 10,
          dept:'',
          period:'',
          equipmentName:'',
          equipmentType:''
      },
      addData :{
          scheduleId:'',
          planName: '',
          // startDate: [],
          // area: '',
          // selecDevice:[],
          // selecUser:[],
          planAssociationId:[],
      },
      areas: [
          // { id: 1, name: '中大肿瘤医院' },
          // { id: 2, name: '中大肿瘤医院-英埔' },
          // { id: 3, name: '中大肿瘤医院-越秀' },
          // 添加更多区域
      ],
      depts:[],
      users:[],
      schedules:[],
      totalOn:0,
      total: 0,
      twoTotal:0,
      selectedRows:[],
      searchQuery: "",
      plans: [
        { name: "任务1", line: "线路1", creationTime: "2023-05-12", creator: "张三", status: "执行" },
        { name: "任务2", line: "线路2", creationTime: "2023-05-13", creator: "李四", status: "完成" },
      ],
      isModalOpen: false,
      currentPage: 1,
      peopleCurrentPage: 1,
      perPage: 5,
      equipments: [],
      people: [
        { name: "张三", department: "维修部", organization: "公司A", phone: "13800138001" },
        { name: "李四", department: "运维部", organization: "公司B", phone: "13800138002" },
        { name: "王五", department: "运维部", organization: "公司C", phone: "13800138003" },
      ],
      filteredData:[],
    };
  },
  created() {
    this.getList();
    this.getDepts();
    this.getUsers();
    this.getSchedules();
    this.getRegionList();
    // this.getEquipmentList();

  },
  computed: {

    totalPages() {
      return Math.ceil(this.equipments.length / this.perPage);
    },
    peopleTotalPages() {
      return Math.ceil(this.people.length / this.perPage);
    },
  },
  methods: {
      setRowHeight() {
        return {
          height: '20px', // 设置行高为50px
          padding: '0' // 如果需要，可以调整内边距，但注意默认有内边距，可能会影响高度
        };
      },
      changeSchedulesId(id){
        this.addData.scheduleId=id;
      },
      addTaskCycle(row) {
        console.log(111111,row);
        // 重置数据
        this.addData.planAssociationId = [];

        // 单条添加：从行数据获取ID
        if (row && row.planAssociationId) {
          this.addData.planAssociationId.push(row.planAssociationId);
        }else if (this.selectedRows.length > 0) {
          this.addData.planAssociationId = this.selectedRows.map(item => item.planAssociationId);
        }
        // 无选中时提示
        else {
          this.$message.warning('请至少选择一条任务！');
          return;
        }
        this.isModalVisibleTwo = true;
        

      },
      handlefilteredChange(selection){
        this.selectedRows = selection;
        console.log("选中的行数据:", this.selectedRows);
      },
      handleArea(selectedArea) {
        if(selectedArea === ''){
          this.equipments = [];
          return false;
      }

      console.log(123,selectedArea)
      getEquipmentListByAreaId(selectedArea).then((response) => {
        this.equipments = response.rows;
        this.total = response.total;
        console.log(753,response)
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    //区域信息
    getRegionList(){
      getRegionList().then((response) => {
        this.areas = response.data;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },

    getSchedules(){
      getSchedules().then((response) => {
        this.schedules = response.rows;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    getUsers(){
      getUsers().then((response) => {
        this.users = response.rows;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    getDepts(){
      getDepts().then((response) => {
        this.depts = response.rows;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    closeTwoModal() {
        this.isModalVisibleTwo = false;
    },

    submit() {
        console.log('提交选择的点检项目:', this.addData);
        this.addData.planName='暂无';
        addCheckingPlan(this.addData).then((response) => {
          console.log('response:', response)
          this.getPlan();
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
        this.closeModal();
    },

    importData(){
      console.log('导入')
    },
    openModal() {
      this.isModalOpen = true;
    },
    closeModal() {
      this.isModalVisibleTwo = false;
      this.isModalOpen = false;
    },
    changePage(direction, type) {
      if (type === "people") {
        if (direction === "previous" && this.peopleCurrentPage > 1) this.peopleCurrentPage--;
        if (direction === "next" && this.peopleCurrentPage < this.peopleTotalPages) this.peopleCurrentPage++;
      } else {
        if (direction === "previous" && this.currentPage > 1) this.currentPage--;
        if (direction === "next" && this.currentPage < this.totalPages) this.currentPage++;
      }
    },
    getEquipments(){
        deviceList(this.formData).then((response) => {
          this.equipments = response.rows;
          this.total = response.total;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
     getPlan(){
      //查询所有计划
        getPlan(this.formDataOn).then((response) => {
          this.filteredData = response.rows;
          this.totalOn = response.total;
          console.log(6666666666666666666,response)
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    getList() {
      this.getPlan();
    },

    usersSelectionChange(selection) {
      this.selectedUserRow = selection.length === 1 ? selection[0] : null;
      this.addData.selecUser = selection;
    },
    // handleSelectionChange(selection) {
    //   console.log(selection);
    //
    //   this.selectedRow = selection.length === 1 ? selection[0] : null;
    //   this.addData.selecDevice = selection;
    // },
  },
};
</script>

<style scoped>



/* 主界面样式 */
/* 美化后的样式 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#app .header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px;
}

.search-box {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn.primary {
  background-color: #007bff;
  color: white;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th,
.custom-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}


.form-row {
  display: flex;
  gap: 15px;
}

.form-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.tables {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.table-section {
  flex: 1;
  margin-right: 10px;
}

.table-section:last-child {
  margin-right: 0;
}

.table-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mini-input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
}


.pagination button {
  padding: 5px 10px;
  cursor: pointer;
}

/* 按钮样式 */
.modal-footer .btn {
  float: right;
  padding: 10px 20px;
}
</style>
